<template>
  <el-dialog
    v-model="drawer"
    :title="drawerProps.title"
    width="500"
    @close="closeDialog"
  >
    <div class="protocolBody">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="城市" prop="city">
          <el-select v-model="ruleForm.city" clearable placeholder="请选择城市">
            <el-option
              v-for="item in cities"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item :label="`机器人(${ruleForm.bots.length})`" prop="bots">
          <div class="bots">
            <el-table
              height="300"
              ref="groupTablesAlreadyRef"
              row-key="windows_id"
              :data="tableDataAlready"
              style="width: 100%"
              class="groupTables"
              @selection-change="multipleElectionAlreadyPerson"
              :show-overflow-tooltip="true"
            >
              <el-table-column type="selection" width="55" />

              <el-table-column
                label="机器人编号"
                prop="windows_id"
                align="center"
              >
                <template #default="scope">
                  {{ scope.row.windows_id }}
                </template>
              </el-table-column>

              <el-table-column
                v-slot="scope"
                prop="city"
                label="城市"
                align="center"
              >
                <span>{{ scope.row.city }}</span>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit(ruleFormRef)">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="tsx" name="settingDialog">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import {
  uploadImgApi,
  setbotsApi,
  setcustomerbotApi,
} from "@/api/modules/login";
import { reactive } from "vue";
const drawer = ref(false);
const groupTablesAlreadyRef = ref();
// const arealyMultipleSelection = ref([]);
const ruleFormRef = ref();

const upLoadImgRef = ref();
const emits = defineEmits(["closeDialog"]);
const tableDataAlready = ref<any>([]);
const ruleForm = ref<any>({
  city: "",
  bots: [],
  type: 0,
  customerid: "",
});

const initialSelectedIds = ref(["601", "605"]); // 预设选中的行ID

const cities = ref([{ value: "广州" }, { value: "深圳" }]);

const rules = reactive<any>({
  city: [{ required: true, message: "请选择城市", trigger: "change" }],
});
const closeDialog = () => {
  console.log("关闭弹窗");
  emits("closeDialog");
};

const getAllBots = async () => {
  try {
    const res: any = await setbotsApi();
    console.log("res", res.data);
    if (res.code == 200) {
      tableDataAlready.value = res.data;
    }
  } catch (error) {}
};

const multipleElectionAlreadyPerson = (data: any) => {
  console.log("已选的", data);
  // arealyMultipleSelection.value = data;
  ruleForm.value.bots = data;
};
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (ruleForm.value.bots.length > 10) {
        ElMessage.warning("此套餐最多选择10个机器人");
        return;
      }
      try {
        const bots = ruleForm.value.bots.map((item) => {
          return item.windows_id;
        });
        const par = {
          ...ruleForm.value,
          bots: bots,
          customerid:drawerProps.value.data.orgid
          // customerid: 0,
        };
        console.log("传参", par);
        const res: any = await setcustomerbotApi(par);
        console.log("res", res);
        if (res.code == 200) {
          ElMessage.success("分配成功");
          drawer.value = false;
          drawerProps.value.getTableList();
        }
      } catch (error) {}
    } else {
      console.log("error submit!", fields);
    }
  });
};

const cancel = () => {
  drawer.value = false;
};

const drawerProps = ref<any>({
  isView: false,
  title: "",
  row: {},
});

// 接收父组件传过来的参数
const acceptParams = async (params: any) => {
  // getProtocolList();
  // resetForm(ruleFormRef.value);
  drawerProps.value = params;
  drawer.value = true;

  console.log("分配机子222", drawerProps.value);
  await getAllBots();

  // 判断有没有已经有数据了
  if (true) {
    ruleForm.value.city = cities.value[0].value;
    ruleForm.value.bots = [];
    ruleForm.value.type = 0;
    ruleForm.value.customerid = "";
  } else {
  }
};

defineExpose({
  acceptParams,
});
</script>
<style lang="scss" scoped>
.option-input {
  width: 100%;
  margin-bottom: 8px;
}
.bots {
  width: 100%;
  height: 300px;
  background-color: pink;
  //   overflow-y: scroll;
}
.protocolBody {
  max-height: 600px;
}

.el-form-item__label-wrap {
  margin-left: 0px !important;
}
.el-form-item--default {
  margin-bottom: 0px !important;
}
</style>
